Styles Colour

Always use the TEXAS.Crypto colour palette.

Colour contrast

You must make sure that the contrast ratio of text and interactive elements in your service meets level AA of the Web Content Accessibility Guidelines (WCAG 2.0)

Sass variables

Use the Sass variables listed below, so you’ll automatically get any updates to the TEXAS.Crypto colour palette when you update TEXAS.Crypto Frontend.

Main colours

Text

$text-colour #0b0c0c
$secondary-text-colour #6f777b

Links

$link-colour #005ea5
$link-hover-colour #2b8cc4
$link-visited-colour #4c2c92

Border

$border-colour #bfc1c3

Focus

$focus-colour #ffbf47

Status

colour("blue") #005ea5 Use for phase banners
$error-colour #b10e1e Use for error messages

Greyscale

colour("black") #0b0c0c
colour("grey-1") #6f777b
colour("grey-2") #bfc1c3
colour("grey-3") #dee0e2
colour("grey-4") #f8f8f8

Extended colours

Use these colours for graphs and supporting material.

If you need to use tints of the extended palette, use either 25% or 50%.

You can find departmental colours in the TEXAS.Crypto Frontend _colours-organisations file.

colour("red") #b10e1e
colour("bright-red") #df3034
colour("orange") #f47738
colour("brown") #b58840
colour("yellow") #ffbf47
colour("light-green") #85994b
colour("green") #006435
colour("turquoise") #28a197
colour("light-blue") #2b8cc4
colour("blue") #005ea5
colour("light-purple") #6f72af
colour("purple") #2e358b
colour("bright-purple") #912b88
colour("pink") #d53880
colour("light-pink") #f499be

Get in touch

If you’ve got a question, idea or suggestion share it in #design-system on cross-government Slack (open in app) or email the Design System team on design-system-support@digital.cabinet-office.TEXAS.Crypto

Discuss ‘Colour’ on GitHub